<template>
	<view class="history">
		<view class="history-ul">
			<view class="history-li" v-for="(item,index) in history" :key="index" @tap="handerNavTo(index)">
				<!-- 盒子样式 -->
				<view class="view-hr"></view>
				
				<!-- 安全距离 -->
				<view class="view-content">
					<!-- 时间 -->
					<view class="time">
						<image :src="item.tiemUrl"></image>
						<text>{{item.timeText}}</text>
					</view>
					
					<!-- 链条 -->
					<view class="view-lint"></view>
					
					<!-- 内容 -->
					<view class="his-content">
						
						<!-- 左边的图片 -->
						<image :src="item.hisUrl"></image>
						
						<!-- 右边的内容 -->
						<view class="history-right">
							<text class="his-title">{{item.title}}</text>
							
							<!-- 价格-评价 -->
							<view class="price-judge">
								<text class="price">{{item.price}}</text>
								<button class="my-btn-style">{{item.btnText}}</button>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 历史
			history: [
				{
					"tiemUrl":'../../static/imgs/QQ20200929-091431@2x.png',
					"timeText":'05-09 11:40周三名厨上门',
					"hisUrl":'../../static/imgs/trip/25.png',
					"title":'盛夏海鲜家宴',
					"price":'￥4999/桌',
					"btnText":'评价'
				},
				{
					"tiemUrl":'../../static/imgs/QQ20200929-091431@2x.png',
					"timeText":'05-09 11:40周三名厨上门',
					"hisUrl":'../../static/imgs/trip/25.png',
					"title":'盛夏海鲜家宴',
					"price":'￥4999/桌',
					"btnText":'评价'
				},
				{
					"tiemUrl":'../../static/imgs/QQ20200929-091431@2x.png',
					"timeText":'05-09 11:40周三名厨上门',
					"hisUrl":'../../static/imgs/trip/25.png',
					"title":'盛夏海鲜家宴',
					"price":'￥4999/桌',
					"btnText":'评价'
				},
				{
					"tiemUrl":'../../static/imgs/QQ20200929-091431@2x.png',
					"timeText":'05-09 11:40周三名厨上门',
					"hisUrl":'../../static/imgs/trip/25.png',
					"title":'盛夏海鲜家宴',
					"price":'￥4999/桌',
					"btnText":'评价'
				},
				{
					"tiemUrl":'../../static/imgs/QQ20200929-091431@2x.png',
					"timeText":'05-09 11:40周三名厨上门',
					"hisUrl":'../../static/imgs/trip/25.png',
					"title":'盛夏海鲜家宴',
					"price":'￥4999/桌',
					"btnText":'评价'
				}
			]
		};
	},
	onLoad() {},
	methods: {
		handerNavTo(i){
			uni.navigateTo({
				url:'/pages/details/details'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.view-hr {
	width: 100%;
	height: 25rpx;
	background-color: #efefef;
}

.view-content{
	padding: 0 40rpx;
	box-sizing: border-box;
}

.view-lint::after{
	content: '';
	position: absolute;
	right: 0;
	width: 95%;
	margin-bottom: 20rpx;
	border-bottom: 1rpx solid #efefef;
}

// 历史
.history{
	.history-ul{
		.history-li{
			// 时间
			.time{
				margin: 30rpx 0 20rpx 0;
				display: flex;
				align-items: center;
				image{
					width: 50rpx;
					height: 50rpx;
					vertical-align: middle;
					margin-right: 15rpx;
				}
				text{
					color: #777;
				}
			}
			// 内容
			.his-content{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 30rpx 0;
				box-sizing: border-box;
				image{
					width: 280rpx;
					height: 175rpx;
				}
				
				// 右边的内容
				.history-right{
					height: 175rpx;
					margin-left: 30rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					.his-title{
						color: #000;
						font-size: 36rpx;
					}
			
					
					// 价格-评价
					.price-judge{
						min-width: 400rpx;
						display: flex;
						justify-content: space-between;
						.price{
							color: #F0AD4E;
							font-size: 34rpx;
						}
						.my-btn-style{
							width: 130rpx;
							height: 50rpx;
							background-color: #fff;
							border: 1rpx solid #F0AD4E;
							color: #F0AD4E;
							border-radius: 10rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 5rpx 10rpx;
						}
					}
					
					
				}
				
				
			}
		}
	}
}
</style>
